<template>
  <div id="top-header">
    <el-button style="height: 50%;margin-left: 5px;margin-top: 5px;background-color: #030409; " @click='back'>数据平台</el-button>
    <dv-decoration-8 class="header-left-decoration" />
    <dv-decoration-5 class="header-center-decoration" />
    <dv-decoration-8 class="header-right-decoration" :reverse="true" />
    <div class="center-title" style="padding-left: 128px;">政企能源感知智能管控平台</div>
      <!-- 当前日期+当前星期 -->
  <div class="datae">{{ nowDate + ' ' + nowWeek }}</div>
        <!-- 当前时间 -->
<div class="timer">{{ nowTime }}</div>
  </div>


</template>

<script>
export default {
  name: 'TopHeader',
  data() {
    return {
      zoom: 18,
      // 动画开光
      loadinge: false,
      nowDate: '', // 当前日期
      nowTime: '', // 当前时间
      nowWeek: '', // 当前星期
      day: '0', //当前天数
      hour: '0', //当前小时
      minute: '0', //当前分钟
      second: '0', //当前秒数
      dialogTableVisible: false
    }
  },
  mounted() {
    this.currentTime()
  },
  // 销毁定时器
  beforeDestroy() {
      console.log("销毁定时器");
      clearInterval(this.getDate) // 在Vue实例销毁前，清除时间定时器
      clearInterval(this.monitortime)
  },
  methods: {
    back(){
      this.$router.replace('/index')
    },
    // 每0.5秒执行一次
    currentTime() {
      setInterval(this.getDate, 500)
      setInterval(this.monitortime, 1000)
    },
    // 获取当前日期时间的方法
    getDate() {
      var _this = this
      //获取年
      let yy = new Date().getFullYear()
      //获取月,注意时间是0-11，0代表1月份
      let mm = new Date().getMonth() + 1
      // 获取具体哪一天
      let dd = new Date().getDate()
      // 获取星期 0-6 0是星期天
      let week = new Date().getDay()
      //获取小时
      let hh = new Date().getHours()
      //获取分钟
      let ms =
        new Date().getSeconds() < 10
          ? '0' + new Date().getSeconds()
          : new Date().getSeconds()
      // 获取秒钟
      let mf =
        new Date().getMinutes() < 10
          ? '0' + new Date().getMinutes()
          : new Date().getMinutes()
      // 获取星期
      if (week == 1) {
        this.nowWeek = '星期一'
      } else if (week == 2) {
        this.nowWeek = '星期二'
      } else if (week == 3) {
        this.nowWeek = '星期三'
      } else if (week == 4) {
        this.nowWeek = '星期四'
      } else if (week == 5) {
        this.nowWeek = '星期五'
      } else if (week == 6) {
        this.nowWeek = '星期六'
      } else {
        this.nowWeek = '星期日'
      }
      _this.nowTime = hh + ':' + mf + ':' + ms
      _this.nowDate = yy + '/' + mm + '/' + dd
    },
  }
}

</script>

<style lang="less">
#top-header {
  position: relative;
  width: 100%;
  height: 100px;
  display: flex;
  justify-content: space-between;
  flex-shrink: 0;

  // 左上角日期星期
  .datae {
        // background-color: skyblue;
        font-size: 15px;
        position: absolute;
        top: 7px;
        left: 200px;
        color: #fff;
      }
      // 右上角的当前时间
      .timer {
        // background-color: skyblue;
        font-size: 15px;
        position: absolute;
        top: 7px;
        right: 200px;
        color: #fff;
      }
  .header-center-decoration {
    width: 40%;
    height: 60px;
    margin-top: 30px;
  }

  .header-left-decoration, .header-right-decoration {
    width: 25%;
    height: 60px;
  }

  .center-title {
    position: absolute;
    font-size: 30px;
    font-weight: bold;
    left: 50%;
    top: 15px;
    transform: translateX(-50%);
  }
}

.conter {
  background-color: rgb(9, 18, 32);
  width: 100%;
  height: 100%;
  // box-sizing: border-box;
  // 最大边框的样式
  ::v-deep #dv-full-screen-container {
    .dv-border-box-11 .border-box-content {
      // background-color: skyblue;
      padding: 62px 9px 10px;
      overflow: hidden;
      border-radius: 55px;
      position: relative;
      .load {
        position: absolute;
        top: 40%;
        left: 50%;
        // margin-left: -37px;
        transform: translateX(-50%);
        z-index: 3;
        .loading-tip {
          margin-top: 15px;
          font-size: 18px;
          color: #fff;
        }
      }
      // 遮罩层
      .shade {
        width: 100%;
        // width: 100%; 取100% margin 右边不会生效 要改成width=99%才有效果
        height: 100%;
        box-sizing: border-box !important;
        // background-color: skyblue;
        margin: 60px 8px 10px;
        background-color: rgb(9, 18, 32);
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
      }
      
    }
  }
}
</style>
